<template>
    <div align="center">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div align="center">
          <el-button @click="choiceHouse">选择房源</el-button>
          <el-dialog title="房源列表" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column property="housingName" label="楼盘名称" width="150"></el-table-column>
              <el-table-column property="houseName" label="房源标题" width="150"></el-table-column>
              <el-table-column property="rent" label="房源租金" width="200"></el-table-column>
              <el-table-column property="address" label="房源地址"></el-table-column>
              <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
        <el-form-item label="上一合同ID" prop="lastContractId">
          <el-input v-model="form.lastContractId" placeholder="请输入上一合同ID，续约合同的时候"/>
        </el-form-item>
        <el-form-item label="小区名,楼盘" prop="premiseName">
          <el-input v-model="form.premiseName" placeholder="请输入小区名(使用楼盘名称)" readonly/>
        </el-form-item>
        <el-form-item label="房源标题" prop="houseTitle">
          <el-input v-model="form.houseTitle" placeholder="请输入房源标题" readonly/>
        </el-form-item>
        <el-form-item label="租房类型" prop="houseLeaseType">
          <el-radio-group v-model="form.houseLeaseType">
            <el-radio :label="1">合租</el-radio>
            <el-radio :label="2">整租</el-radio>
            <el-radio :label="3">公寓</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付类型" prop="paymentMethod">
          <el-select v-model="form.paymentMethod">
            <el-option v-for="t in payments" :key="t.id" :value="t.id" :label="t.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房产证书编号" prop="houseZsNo">
          <el-input v-model="form.houseZsNo" placeholder="请输入房产证书编号" />
        </el-form-item>
        <el-form-item label="产权地址" prop="cqAddress">
          <el-input v-model="form.cqAddress" placeholder="请输入产权地址" />
        </el-form-item>
        <el-form-item label="房东姓名" prop="ownerName">
          <el-input v-model="form.ownerName" placeholder="请输入房东姓名" />
        </el-form-item>
        <el-form-item label="房东证件号码" prop="ownerIdCard">
          <el-input v-model="form.ownerIdCard" placeholder="请输入房东证件号码" />
        </el-form-item>
        <el-form-item label="房东手机号" prop="ownerMobile">
          <el-input v-model="form.ownerMobile" placeholder="请输入房东手机号" />
        </el-form-item>
        <el-form-item label="房东联系地址" prop="ownerAddress">
          <el-input v-model="form.ownerAddress" placeholder="请输入产权地址" />
        </el-form-item>
        <el-form-item label="租户名称" prop="signUserName">
          <el-input v-model="form.signUserName" placeholder="请输入租户名称" />
        </el-form-item>
        <el-form-item label="租户人证件号" prop="signUserIdCard">
          <el-input v-model="form.signUserIdCard" placeholder="请输入租户人证件号" />
        </el-form-item>
        <el-form-item label="租户人手机号" prop="signUserMobile">
          <el-input v-model="form.signUserMobile" placeholder="请输入租户人手机号" />
        </el-form-item>
        <el-form-item label="租户紧急联系电话" prop="signUserEmergencyPhone">
          <el-input v-model="form.signUserEmergencyPhone" placeholder="请输入租户紧急联系电话" />
        </el-form-item>
        <el-form-item label="租约期限开始时间" prop="leaseStartTime">
          <el-date-picker clearable
                          v-model="form.leaseStartTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择租约期限开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="租约期限结束时间" prop="leaseEndTime">
          <el-date-picker clearable
                          v-model="form.leaseEndTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择租约期限结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收房月租金" prop="monthRent">
          <el-input v-model="form.monthRent" placeholder="请输入收房月租金" readonly />
        </el-form-item>
        <el-form-item label="房产押金" prop="depositMoney">
          <el-input v-model="form.depositMoney" placeholder="请输入房产押金" readonly/>
        </el-form-item>
        <el-form-item label="附件">
          <uploader :options="options" class="uploader-example"
                    @file-added="onFileAdded">
            <uploader-unsupport></uploader-unsupport>
            <uploader-drop>
              <p>Drop files here to upload or</p>
              <uploader-btn>select files</uploader-btn>
              <uploader-btn :attrs="attrs">select images</uploader-btn>
              <uploader-btn :directory="true">select folder</uploader-btn>
            </uploader-drop>
            <uploader-list></uploader-list>
          </uploader>
        </el-form-item>
<!--        <el-form>-->
<!--          <el-form-item label="大文件上传">-->
<!--            <uploader :options="options" class="uploader-example"-->
<!--                      @file-added="onFileAdded">-->
<!--              <uploader-unsupport></uploader-unsupport>-->
<!--              <uploader-drop>-->
<!--                <p>Drop files here to upload or</p>-->
<!--                <uploader-btn>select files</uploader-btn>-->
<!--                <uploader-btn :attrs="attrs">select images</uploader-btn>-->
<!--                <uploader-btn :directory="true">select folder</uploader-btn>-->
<!--              </uploader-drop>-->
<!--              <uploader-list></uploader-list>-->
<!--            </uploader>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="应付租金" prop="grossRent">
          <el-input v-model="totalRents" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
</template>

<script>
  import { selHouse, addContract,updateContract } from "@/api/contract/contract";

    export default {
        name: "add",
        data(){
          return{
            options: {
              target: 'http://39.98.78.239:8080/file/postFileUpload', // 目标上传 URL
              chunkSize: '2048000',   //分块大小
              fileParameterName: 'file', //上传文件时文件的参数名，默认file
              maxChunkRetries: 3,  //最大自动失败重试上传次数
              testChunks: false,     //是否开启服务器分片校验
            },
            baseUrl: null,
            gridData:[],
            dialogTableVisible:false,
            houses:[],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
              sfContractNo: [
                { required: true, message: "合同编号不能为空", trigger: "blur" }
              ],
              premiseName: [
                { required: true, message: "小区名(使用楼盘名称)不能为空", trigger: "blur" }
              ],
              cqAddress: [
                { required: true, message: "产权地址不能为空", trigger: "blur" }
              ],
              houseTitle: [
                { required: true, message: "房源标题不能为空", trigger: "blur" }
              ],
              ownerMobile: [
                { required: true, message: "房东手机号不能为空", trigger: "blur" }
              ],
              ownerName: [
                { required: true, message: "房东姓名不能为空", trigger: "blur" }
              ],
              signUserName: [
                { required: true, message: "租户名称不能为空", trigger: "blur" }
              ],
              leaseStartTime: [
                { required: true, message: "租约期限开始时间不能为空", trigger: "blur" }
              ],
              leaseEndTime: [
                { required: true, message: "租约期限结束时间不能为空", trigger: "blur" }
              ],
              monthRent: [
                { required: true, message: "收房月租金不能为空", trigger: "blur" }
              ],
              status: [
                { required: true, message: "合同状态不能为空", trigger: "blur" }
              ],
              xyStatus: [
                { required: true, message: "续约状态不能为空", trigger: "blur" }
              ]
            },
            payments: [{ id: 1, name: '押一付一' }, { id: 2, name: '押三付二' }, { id: 3, name: '押一付一六' }, { id: 4, name: '一年付' }]
          }
        },
        created() {
        },
      methods: {
        // 表单重置
        reset() {
          this.form = {
            grossRent: null,
            id: null,
            sfContractNo: null,
            lastContractId: null,
            lastContractNo: null,
            businessId: null,
            premiseName: null,
            houseId: null,
            houseTitle: null,
            houseZsNo: null,
            cqAddress: null,
            ownerId: null,
            ownerName: null,
            ownerIdCard: null,
            ownerMobile: null,
            signUserName: null,
            signUserIdCard: null,
            signUserMobile: null,
            signUserEmergencyPhone: null,
            leaseStartTime: null,
            leaseEndTime: null,
            monthRent: null,
            depositMoney: null,
            depositType: null,
            paymentType: null,
            conSignTime: null,
            conInfoTime: null,
            conAudTime: null,
            operId: null,
            sfUserId: null,
            sfUserName: null,
            status: 0,
            xyStatus: 0,
            sfLoanFlg: null,
            remark: null,
            delFlg: null,
            createUserid: null,
            createTime: null,
            updateUserid: null,
            updateTime: null,
            houseLeaseType: null,

          };
          this.resetForm("form");
        },
        choiceHouse() {
          selHouse().then(response => {
            this.gridData = response.rows;
            this.dialogTableVisible = true;

          });
        },
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.id != null) {
                updateContract(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                });
              } else {
                this.form.grossRent = this.totalRents
                console.log(this.form.totalRent)
                addContract(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.$router.push({path: "/contract/index"})
                });
              }
            }
          });
        },
        handleClick(data) {
          this.form.premiseName = data.housingName
          this.form.houseTitle = data.houseName
          this.form.cqAddress = data.address
          this.form.monthRent = data.rent
          this.form.depositMoney = data.rent
          this.dialogTableVisible = false
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // **data配置**

        // **methods方法，MD5对文件签名**
        onFileAdded(file) {
          const fileReader = new FileReader()
          // fileReader.readAsBinaryString(file);
          fileReader.onload = e => {
            const md5 = SparkMD5.hashBinary(e.target.result);
            console.log(md5);
            file.uniqueIdentifier = md5;
          }
        }

      },
        // 计算应收租金
        computed: {
          totalRents: function () {
            if (this.form.paymentMethod === 1) {
              return this.form.monthRent * 1 + this.form.depositMoney
            }
            if (this.form.paymentMethod === 2) {
              return this.form.monthRent * 2 + this.form.depositMoney * 3
            }
            if (this.form.paymentMethod === 3) {
              return this.form.monthRent * 1 + this.form.depositMoney * 6
            }
            if (this.form.paymentMethod === 4) {
              return this.form.monthRent * 12 + this.form.depositMoney
            }
          }
        },
      }
</script>

<style scoped>

</style>
